﻿@using RuoVea.OmiSystem.Attributes
@using RuoVea.OmiSystem.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(RuoVea.OmiSystem.Language.i18n.organization_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style> .el-button [class*="el-icon-"] + span { margin-left: 1px !important; } </style>
</head>
<body>

    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                    :cell-style="cellStyle"
                   v-on:on-load="onLoad">
            <template slot="avatar" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
            </template>
            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
        </avue-crud>
    </div>

    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script> 
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script> 
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>

    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    name: "organization",
                    pageUrl: "/organization/pages",
                    addUrl: "/organization/add",
                    editUrl: "/organization/update",
                    deleteUrl: "/organization/delete",

                    option: {
                        searchShowBtn: Permissions.avePermission(`sysOrg:list`),
                        refreshBtn: Permissions.avePermission(`sysOrg:list`),

                        addBtn: Permissions.avePermission(`sysOrg:addOrg`),
                        editBtn: Permissions.avePermission(`sysOrg:updateOrg`),
                        delBtn: Permissions.avePermission(`sysOrg:deleteOrg`),
                        viewBtn: true,
                        searchMenuSpan:8,
                        rowKey: 'id',
                        page: false, 
                        expand: false,
                        searchShow:false,
                        defaultExpandAll:true,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "pid", label: `${this.i18n.t('parent_organization')}`, search: false, hide: true, showColumn: false,type: "tree",defaultExpandAll: true, props: {label: 'name',value: 'id',children:'children' },dicUrl:`${Vue.prototype.$baseURL}/organization/org`, showAllLevels:false, emitPath:false,checkStrictly: true },
                            { prop: "name", label: `${this.i18n.t('organization_name')}`, search: true, hide: false, type: "input", clearable: true,rules:[{ required: true,trigger: "blur",message: `${this.i18n.t('pleaseenter')}`}], },
                            { prop: "code", label: `${this.i18n.t('organization_code')}`, search: true, hide: false, type: "input", clearable: true,rules:[{ required: true,trigger: "blur",message: `${this.i18n.t('pleaseenter')}`}], },
                            // { prop: "tel", label: `${this.i18n.t('phone')}`, search: true, hide: false, type: "input", clearable: true },
                            { prop: "isDisable", label:`${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio",button:true, dicData:disableDicData, width: '80',},
                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number",step:100, value: 100, clearable: true },
                            { prop: "remark", label: `${this.i18n.t('note')}`,type:'textarea',  hide: true,showColumn: false,span:24,rows:2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, minWidth: 140, },
                        ]
                    },
                }
            },
            created() {
            },
            methods: {
             cellStyle({row,column,rowIndex,columnIndex})
             { 
                if(columnIndex==3){
                  if(row.isDisable==0){
                    return { color:'#409eff',}
                  }
                  else
                  {
                    return { color:'#f56c6c',}
                  }
                }
              },
            }
        });
    </script>
</body>
</html>